<template>
    <!-- vue3页面 -->
    <div class="about-wrap">
        <h1>测试树结构</h1>
        <div class="btnwrap">
            <!-- <a id="copy" href="#" title="复制" onclick="return false;">复制</a> 
			<a id="cut" href="#" title="剪切" onclick="return false;">剪切</a> 
			<a id="paste" href="#" title="粘贴" onclick="return false;">粘贴</a>  -->

            <a id="addLeaf" href="#" title="增加叶子节点" onclick="return false;">增加叶子节点</a>
            <a id="remove" href="#" title="删除节点" onclick="return false;">删除节点</a>
        </div>
        <div class="content_wrap">
            <div class="zTreeDemoBackground left">
                <ul id="treeDemo" class="ztree"></ul>
            </div>
            <div class="right">
                <ul id="treeDemo2" class="ztree"></ul>
            </div>
        </div>
    </div>
</template>

<script lang='ts'>

import { defineComponent, onMounted, reactive } from 'vue'
import $ from 'jquery';
 

export default defineComponent({
    name: 'AboutView',
    props :{
        
    },
    setup(props) {

        let onDrag =(event:any, treeId:any, treeNodes:any)=> {
            alert(treeNodes.length);
        };
        let onDrop = (event:any, treeId:any, treeNodes:any, targetNode:any, moveType:any)=>{
            alert(treeNodes.length + "," + (targetNode ? (targetNode.tId + ", " + targetNode.name) : "isRoot" ));
        };

        let beforeDrag=(treeId:any, treeNodes:any)=> {
            console.log(treeId, treeNodes,'beforeDrag');

			for (var i=0,l=treeNodes.length; i<l; i++) {
				if (treeNodes[i].drag === false) {
					return false;  
				}
			}
			return true;
		}
		let beforeDrop=(treeId:any, treeNodes:any, targetNode:any, moveType:any)=> {
            console.log(treeId,'b drop');
            
			return targetNode ? targetNode.drop !== false : true;
		}
        let showCode=(id:any, str:any)=> {
			var code = $("#code" + id);
			code.empty();
			for (var i=0, l=str.length; i<l; i++) {
				code.append("<li>"+str[i]+"</li>");
			}
		}
		
		let setCheck=()=> {
            let tree:any = $.fn;
			var zTree = tree.zTree.getZTreeObj("treeDemo"),
			isCopy = $("#copy").attr("checked"),
			isMove = $("#move").attr("checked"),
			prev = $("#prev").attr("checked"),
			inner = $("#inner").attr("checked"),
			next = $("#next").attr("checked");
			zTree.setting.edit.drag.isCopy = isCopy;
			zTree.setting.edit.drag.isMove = isMove;
			showCode(1, ['setting.edit.drag.isCopy = ' + isCopy, 'setting.edit.drag.isMove = ' + isMove]);

			zTree.setting.edit.drag.prev = prev;
			zTree.setting.edit.drag.inner = inner;
			zTree.setting.edit.drag.next = next;
			showCode(2, ['setting.edit.drag.prev = ' + prev, 'setting.edit.drag.inner = ' + inner, 'setting.edit.drag.next = ' + next]);
		}
        let newCount = 1;
        let trees:any = $.fn;
        // 增加子节点
        let add=(e:any)=>{
			var zTree = trees.zTree.getZTreeObj("treeDemo"),
			isParent = e.data.isParent,
			nodes = zTree.getSelectedNodes(),
			treeNode = nodes[0];
			if (treeNode) {
				treeNode = zTree.addNodes(treeNode, {id:(100 + newCount), pId:treeNode.id, isParent:isParent, name:"new node" + (newCount++)});
			} else {
				treeNode = zTree.addNodes(null, {id:(100 + newCount), pId:0, isParent:isParent, name:"new node" + (newCount++)});
			}
			if (treeNode) {
				zTree.editName(treeNode[0]);
			} else {
				alert("叶子节点被锁定，无法增加子节点");
			}
		};
        // 删除子节点
        let remove = (e:any) => {
			var zTree = trees.zTree.getZTreeObj("treeDemo"),
			nodes = zTree.getSelectedNodes(),
			treeNode = nodes[0];
			if (nodes.length == 0) {
				alert("请先选择一个节点");
				return;
			}
			var callbackFlag = $("#callbackTrigger").attr("checked");
			zTree.removeNode(treeNode, callbackFlag);
		};
		
        var setting = {
			edit: {
				enable: true,
                // 显示删除按钮
				showRemoveBtn: true,
                // 显示更改名称按钮
				showRenameBtn: true
			},
			data: {
				simpleData: {
					enable: true
				}
			},
			view: {
				showLine: false
			},
			callback: {
				beforeDrag: beforeDrag,
				beforeDrop: beforeDrop
			}
		};

        var zNodes =[
			{ id:1, pId:0, name:"父节点 1", open:true},
			{ id:11, pId:1, name:"叶子节点 1-1"},
			{ id:12, pId:1, name:"叶子节点 1-2"},
			{ id:13, pId:1, name:"叶子节点 1-3"},
			{ id:2, pId:0, name:"父节点 2", open:true},
			{ id:21, pId:2, name:"叶子节点 2-1"},
			{ id:22, pId:2, name:"叶子节点 2-2"},
			{ id:23, pId:2, name:"叶子节点 2-3"},
			{ id:3, pId:0, name:"父节点 3", open:true},
			{ id:31, pId:3, name:"叶子节点 3-1"},
			{ id:32, pId:3, name:"叶子节点 3-2"},
			{ id:33, pId:3, name:"叶子节点 3-3"}
		];

        onMounted(()=>{

            ss();
          
        });


        let ss= ()=>{
            $(document).ready(function(){
                // console.log($.fn.zTree.init);
                let tree:any = $.fn;
                // $("#copy").bind("click", copy);
                // $("#cut").bind("click", cut);
                // $("#paste").bind("click", paste);

                // console.log(setting,'setting');
                tree.zTree.init($("#treeDemo"), setting, zNodes);
			    tree.zTree.init($("#treeDemo2"), setting);

			    $("#addLeaf").bind("click", {isParent:false}, add);
			    $("#remove").bind("click", remove);

                // tree.zTree.init($("#treeDemo"), setting, zNodes);
                // setCheck();

                // $("#copy").bind("change", setCheck);
                // $("#move").bind("change", setCheck);
                // $("#prev").bind("change", setCheck);
                // $("#inner").bind("change", setCheck);
                // $("#next").bind("change", setCheck);

            });
        }
        

        return {
            setting,
            zNodes,
            ss,
            beforeDrag,
            beforeDrop,
            setCheck,
            showCode,
            add,

        }
    }
})
</script>

<style lang='less' scoped>

// @import '../../public/css/demo.css';
@import '../../public/css/zTreeStyle.css';
 
    .about-wrap{
        width:100%;
        height: 100%;
        // background-color: #999;


        .btnwrap{
            display: flex;
            justify-content: space-around;
            color: #222;
            font-size: 16px;
            padding-bottom: 20px;
            a{
                cursor: pointer;
            }
            
        }
        .treewrap{
            width: 100%;
            height: 100%;
            display: flex;
            
        }
        .left{
            width: 40%;
            height: 100%;
			margin: 0 auto;
			float: left !important;
			border: solid pink;
			
        }
        .right{
            width: 40%;
            height: 100%;
			float: left !important;
			border:solid forestgreen
        }
        
    }
</style>